<template>
    <n-config-provider :local="zhCN" :date-locale="dateZhCN" :theme-overrides="appTheme">
        <n-global-style />
        <n-dialog-provider>
            <n-notification-provider>
                <n-message-provider>
                    <router-view />
                </n-message-provider>
            </n-notification-provider>
        </n-dialog-provider>
        <n-float-button :right="20" :bottom="20" type="primary">
            <n-icon></n-icon>
        </n-float-button>
    </n-config-provider>
</template>

<script setup lang="ts">
import { NConfigProvider, zhCN, dateZhCN, GlobalThemeOverrides } from "naive-ui"
import { useThemeStore } from "@/store"
import { brightenColor } from "@/utils"

const { theme } = storeToRefs(useThemeStore())

const appTheme = computed((): GlobalThemeOverrides => {
    const primaryColor = theme.value.primaryColor
    const primaryColorHover = brightenColor(primaryColor)
    return {
        common: {
            primaryColor: primaryColor,
            primaryColorHover: primaryColorHover,
            primaryColorPressed: primaryColorHover,
            primaryColorSuppl: primaryColor
        },
        Button: {
            heightMedium: "30px"
        }
    }
})
</script>

<style lang="less">
@import "assets/less/index.less";
</style>
